<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#content {
	margin: auto;
	background: black;
	color: pink;
	font-size: 60px;
	text-align: center;
	margin-top: 45vh;
}

html {
	background: black;
}

.btnmain {
	width: 150px;
	height: 50px;
	font-size: 30px;
	font-weight: 900;
	margin: auto;
	display: block;
	margin-top: 50vh;
	border-radius: 15px;
	background-color: pink;
}

.progressBar {
	width: 200px;
	height: 8px;
	border: 1px solid #98AFB7;
	border-radius: 5px;
}

#bar {
	width: 0px;
	height: 8px;
	border-radius: 5px;
	background: #5EC4EA;
}
</style>
</head>
<body>
	<input type="button" class="btnmain" value="点我">
	<div class="progressBar">
			<div id="bar" style=""></div>
		</div>
	<div id="content">
	</div>
	<script type="text/javascript">
		var text = {
			"0" : "我",
			"1" : "是",
			"2" : "涂",
			"3" : "大",
			"4" : "美",
			"5" : "女",
		}
		var time = 1000;
		var t;
		var index = 0;
		$(".btnmain").click(function() {
			$(".btnmain").fadeToggle("700");
			//初始化js进度条
			$("#bar").css("width", "0px");
			//进度条的速度，越小越快
			var speed = 20;
			clearInterval(t);
			t = setInterval(main, time)
			bar = setInterval(function() {
				nowWidth = parseInt($("#bar").width());
				//宽度要不能大于进度条的总宽度
				if (nowWidth <= 200) {
					barWidth = (nowWidth + 1) + "px";
					$("#bar").css("width", barWidth);
				} else {
					//进度条读满后，停止
					clearInterval(bar);
				}
			}, speed);
		})

		function main() {
			for ( var i in text) {
				if (index == i) {
					$("h1").remove();
					$("#content").append('<h1 >' + text[i] + '</h1>');
				} else if (index > i) {
					$("h1").remove();
					//$(".btnmain").fadeIn("1000");
				}
			}
			index++;
		}
	</script>

</body>
</html>